<template>
  <!--视图-->
  <div>

    <h3>请确认租用车辆信息</h3>
    <hr>
    车辆编号:{{dataCar.carNum}}<br>
    车辆Vin:{{dataCar.carVin}}<br>
    车辆图片:<el-image style="width: 100px; height: 100px" :src="dataCar.carImg"></el-image><br>
    车辆电机编号:{{dataCar.carMotorNum}}<br>
    车辆电池编号:{{dataCar.carBatteryNum}}<br>
    车辆状态:{{dataCar.status}}<br>
    省:{{dataCar.carSheng}}<br>
    市:{{dataCar.carShi}}<br>
    区:{{dataCar.carQu}}<br>
    车辆牌照号码:{{dataCar.licensePlate}}<br>
    车辆品牌:{{dataCar.make}}<br>
    车辆型号:{{dataCar.model}}<br>
    生产年份:{{dataCar.year}}<br>
    车辆颜色:{{dataCar.color}}<br>
    日租价格:{{dataCar.dailyRate}}<br><br>

    <button @click="openRent">确定租用此车</button>

    <!--    租用弹窗-->
    <el-dialog title="租用" :visible.sync="dialogFormVisibleRent">
      <el-form :model="formRent">

        <el-form-item label="租车时间选择" :label-width="formLabelWidth">
        <el-date-picker
            v-model="valueDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            value-format="yyyy-MM-dd"
            end-placeholder="结束日期"
        @change="dateAll">
        </el-date-picker>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleRent = false">取 消</el-button>
        <el-button type="primary" @click="saveOrder">确 定</el-button>
      </div>
    </el-dialog>


    <h3>评论区3</h3>

    <div style="margin: 20px 0">

      <el-rate v-model:aria-valuemax="comment.value" :colors="['#99A9BF', '#F7BA2A','#FF9900']"
               :max="5"
               allow-half
               show-text
               :texts="['1','2','3','4','5']">
      </el-rate>

      <div style="margin: 10px 0">
        <el-input type="textarea" placeholder="欢迎评论" v-model="comment.content"></el-input>
        <div style="text-align: right;margin: 10px 0">
          <el-button type="primary" @click="submit">提交</el-button>
        </div>
      </div>
    </div>

    <div style="margin: 20px 0">
      <div style="margin: 10px 0;font-size: 24px;padding: 10px 0;border-bottom: 1px solid #cccccc; text-align: left">评论列表</div>

      <div style="margin: 20px 0;text-align: left;">
        <div style="padding: 10px 0" v-for="item in comments" :key="item.id">
        <div style="display: flex">
          <div style="width: 80px"><el-avatar :size="40" :src="'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'"></el-avatar></div>
        <div style="flex: 1">
          <div>{{item.customerName}} <span style="margin-left: 10px">{{item.createdTime}}</span></div>
          <div style="margin-top: 10px;color: #8c939d">{{item.content}}</div>

          <!--        多级回复  style="text-align: right;margin: 10px 0"-->
          <div>
            <el-button type="text" @click="openReply(item.id,item.userName)">回复</el-button>
          </div>

<!--        回复列表-->
          <div v-if="item.children.length" style="margin-left: 100px;background-color: #DCE2E3FF;padding: 10px;border-radius: 10px">
            <div v-for="sub in item.children" :key="sub.id">
              <div style="padding: 5px 0"><b style="cursor: pointer" @click="openReply(sub.pid,sub.userName)">{{sub.customerName}}</b> <span>回复<span style="color: rgba(34,76,182,0.72)">@{{sub.target}}</span>
                <span style="color: #6B9CA4FF;margin-left: 10px">{{sub.content}}</span></span>
                <span style="float: right;font-size: 13px;color: #948A98FF;margin-top: 3px">{{item.createdTime}}</span>
              </div>
            </div>
          </div>
        </div>
        </div>
        </div>
      </div>
    </div>

    <el-dialog title="回复" :visible.sync="dialogFormVisible">
      <el-form :model="replyComment">
        <el-form-item label="内容" :label-width="formLabelWidth">
          <el-input v-model="replyComment.content" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveReply">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "CarOrderView",
  data() {//属性
    return {
      dataCar:{},//从跳转获取到的数据
      tableDataOrder:[],
      formLabelWidth:'120px',
      //租用弹窗
      dialogFormVisibleRent:false,
      formRent:{},
      //时间区间选择
      valueDate:'',
      //-----3
      comments: [],
      comment:{
        value: 0,
        content:'',
      },
      replyComment:{
        value: 0,
        content:'',
      },
      dialogFormVisible:false,
      //-------
      formInline:{},
      textarea:'',
      input:'',
      //评论
      commentContentClass:{},
      replyContentClass:{},


      commentContent: '',
      replyContent: '',
      carId: 1, // 假设视频 ID，实际应用中应动态获取
    }
  }, methods: {//自定义方法
    //执行回复
    saveReply(){
      this.replyComment.carId=this.dataCar.id;
      this.replyComment.token=localStorage.getItem("token");
      this.axios.post('http://localhost:10018/commentTow/addComment', this.replyComment).then(res => {
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.replyComment={};
          this.fetchComments();
          this.dialogFormVisible=false;
        }else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //打开回复
    openReply(pid,target){//{pid:pid,userId:2,customerName:'李四',foreignId:1,target:target};

      this.replyComment.pid=pid;
      this.replyComment.target=target;

      this.dialogFormVisible=true;
    },
    // 获取视频的评论
    fetchComments(){
      this.axios.get('http://localhost:10018/commentTow/getCommentsByCarId?carId='+this.carId).then(res=>{
        this.comments=res.data.comments;
        console.log(res.comments);
        console.log("+++++");
        console.log(res);
        console.log("-------");
        console.log(this.comments);
      })
    },
    //添加评论
    submit(){
      this.comment.carId=this.dataCar.id;
      this.comment.token=localStorage.getItem("token");
      this.axios.post('http://localhost:10018/commentTow/addComment', this.comment).then(res => {
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.comment={};
          this.fetchComments();
        }else {
          this.$message.error(res.data.msg);
        }
      });
    },
    //分解时间区间
    dateAll(dateGet){
      this.valueDate=dateGet;
      if(this.valueDate!=null){
        this.formRent.startDate=this.valueDate[0];
        this.formRent.endDate=this.valueDate[1];
      }else {
        this.formRent.startDate='';
        this.formRent.endDate='';
      }
    },
    list(){
      this.axios.post("http://localhost:10018/carOrder/list").then(res=>{
        this.tableDataOrder=res.data.data;
      })
    },
    //打开租用弹窗
    openRent(res){
      this.formRent={};
      //获得车辆主键
      this.formRent.carId=res.carId;
      this.dialogFormVisibleRent=true;
    },
    //执行租用
    saveOrder(){
      this.axios.post("http://localhost:10018/carOrder/saveOrder",this.formRent).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.dialogFormVisibleRent=false;
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    }
  }, created() { //钩子函数

    let row = this.$route.params.row;
    this.dataCar=row;
    this.carId=this.dataCar.id;
    this.fetchComments();
  }
}
</script>

<style scoped>

</style>
